// 打包压缩文件webpack
// npm i yarn -g  全局安装yarn  `
// 1. yarn init -y  准备package.json文件  `
// 1.1package.json文件 规定"main": "index.js" => 压缩的默认入口为src下面的index.js
// 1.2在package.json文件配置scripts  scripts: {
	                                //      "build": "webpack"}  `

// 2. yarn add webpack webpack-cli -D  下载webpack和webpack-cli `
// 修改入口文件 2.1在src下创建webpack.config.js 配置 entry 属性  `
            // 2.2module.exports = {
                  //  entry: '入口文件路径',
                  // };
// 2.3修改出口文件   // module.exports = {             `
                    //     entry: '入口文件路径',
                    //     output: {  
                    //     clean:true,  //每次打包前，清空之前打包好的代码
                    //     path: path.join(__dirname, 'dist'), //出口路径
                    //     filename: 'xxx.js',      //出口文件名
                    //  } ,
             
// 3. yarn build压缩文件 =>会生成一个dist文件夹=>里面有一个main.js即为压缩好的文件  `

// 4.HtmlWebpackPlugin (作用：以某个html文件作为模板生成新的html文件 并把打包好的(webpack)代码引入)  `
//   4.1 yarn add HtmlWebpackPlugin -D下载包
//   4.2 配置文件webpack.config.js (1.引入模板 2.配置plugins)

// 5.设置模式 (解决终端警告)
//    mode: 'production',

// 6. 打包css文件 (webpack 只认识js和json)
//   6.1webpack 只认识js和json 想要压缩css必须先下载"style-loader"和"css-loader"并配置文件规则webpack.config.js(查文档)
        //注： css-loader是为了让webpack能够识别css文件的内容并打包   style-loader是为了把CSS样式插入到DOM中。
//   6.2把css文件引入到入口文件中 => import 'css文件路径'

// 7. 打包less文件 (webpack 只认识js和json) ['style-loader', 'css-loader', 'less-loader',],
//   7.1想要打包压缩less必须先下载"less"和"less-loader"并配置文件规则webpack.config.js(查文档)
        // 注：less-loader是为了让webpack能够识别less文件的内容并打包   less是为了将less转化成css 
//   7.2把less文件引入到入口文件中 => import 'less文件路径'

// 8. 打包图片img
//   8.1配置webpack.config.js的rules  {test: /\.(png|jpg|gif|jpeg)$/i,type: 'asset'}
//   8.2在入口文件里 引入图片模块 => 创建图片元素 => 放到body里 => 渲染到页面
//      注：asset 作用 1.图片小于8kb转成64base字符串  2.图片大于8kb直接输出图片到dist文件夹下

// 9.处理字体图标
//   9.1在main.js引入iconfont.css模块 => 创建i标签 => 添加类名引入字体图标 => 放到body里渲染页面
//   9.2配置webpack.config.js   'asset/resource'=>直接把原文件输出  filename: 'font/[name].[hash:6][ext]'=>根据原文件生成的 文件位置和名字

// 10.高级js语言降级处理
//   10.1下载yarn add babel-loader @babel/core @babel/preset-env -D
//   10.2在main.js里写高级js语法 
//   10.3配置webpack.config.js  用babel-loader

// 11.webpack-dev-server 启动本地服务, 可实时更新修改的代码,(不需要更新一次打包一次了)
//   11.1 下载包=>yarn add webpack-dev-server -D
//   11.2 在package.json文件中配置命令scripts: {"build": "webpack","serve": "webpack serve"}
//   11.3 运行命令 yarn serve => 启动webpack开发服务器
//   11.4 在webpack.config.js根目录下配置devServer: {port: 端口号,} 修改开发服务器的端口号

 